<template>
  <div>
    <input :value="val" type="text" :class="className" @input="checkInput($event)" @blur="checkBlur($event)">
  </div>
</template>
<script>
  import LimitClass from '@/components/limit'
  export default {
    data () {
      return {}
    },
    props: {
      className: String,
      dataIndex: String,
      val: [Number, String],
        dataType: {
        type: String,
        default: 'name'
      },
      dataLimit: {
        type: [Number, String],
        default: 200
      },
      changFun: {
        type: [Object, Function],
        default: null
      }
    },
    methods: {
      checkInput: function (e) {
        // TODO检测输入的值然后进行改动
        let v = e.target.value
        let l = parseInt(this.dataLimit)
        let x = LimitClass.checkLength(l,v)
        if (x.status) {
          e.target.value = x.data
          alert(x.msg)
        }
        this.$emit('changeItem',x.data, this.dataIndex)
      },
      checkBlur: function (e) {
        // TODO检测输入的值然后进行改动
        // console.log(e.target.value)
      }
    }
  }
</script>
<style lang="stylus" scoped>

</style>

